<template>
  <div class="login-container" :style="bg">
    <swhlan></swhlan>
    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
             label-width="0px"
             class="card-box login-form">
      <h3 class="title">{{$t('message.title')}}</h3>
      <el-form-item prop="username">
        <span class="svg-container svg-container_login">
          <icon-svg icon-class="yonghuming"/>
        </span>
        <el-input name="username" :placeholder= "unPlaceHolder" type="text" v-model.trim="loginForm.username" autoComplete="on"
                 />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <icon-svg icon-class="mima"></icon-svg>
        </span>
        <el-input name="password" type="password" @keyup.enter.native="handleLogin"
                  v-model.trim="loginForm.password"
                  autoComplete="on"
                  :placeholder="pswPlaceHolder"></el-input>
      </el-form-item>
      <el-row :gutter="20">
        <el-col >
          <el-button type="primary" style="width:100%;" :loading="loading"
                     @click.native.prevent="handleLogin">
            {{$t('message.login')}}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script
  type="text/ecmascript-6"
>
  import {isvalidUsername} from "@/utils/validate";
  import C from "@/config/comm";
  import loginbj from "@/assets/image/loginbj.jpg";
  import logo from "@/assets/image/logo.png";
  import swhlan from '@/components/comm/swh-lan'

  export default {
    name: "login",
    components:{swhlan},
    data() {
      const validateUsername = (rule, value, callback) =>
        {
          if (!isvalidUsername(value)) {
            callback(new Error("请输入正确的用户名"));
          } else {
            callback();
          }
        }
        ;
      const validatePass = (rule, value, callback) =>
        {
          if (value.length < 6) {
            callback(new Error("密码不能小于6位"));
          } else {
            callback();
          }
        }
        ;
      return {
        title: C.title,
        unPlaceHolder:this.$t('message.accountPlaceHolder'),
        pswPlaceHolder:this.$t('message.pswPlaceHolder'),
        randStr: "",
        loginForm: {
          username: "",
          password: "",
          captcha: ""
        },
        loginRules: {
          username: [
            {required: true, trigger: "blur", validator: validateUsername}
          ],
          password: [
            {required: true, trigger: "blur", validator: validatePass}
          ],
          captcha: [{required: true, message: "验证码必填", trigger: "blur"}]
        },
        loading: false,
        bg: "background-image: url(" + loginbj + ");",
        logo: logo
      };
    },
    methods: {
      handleRegister() {
        this.$router.push("/register");
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            this.$store
              .dispatch("Login", this.loginForm)
              .then(data => {
                this.loading = false;
                this.$store
                  .dispatch("GenerateRoutes", {roles: data.permissionGroups})
                  .then(
                    function()
                    {
                      his.$router.addRoutes(this.$store.getters.addRouters);
                      this.$router.push({path: "/"});
                    }
                    /*        () = > {
                     this.$router.addRoutes(this.$store.getters.addRouters);
                     this.$router.push({path: "/"});
                     }*/
                  )
                ;
              })
              .
              catch(() => {
                this.loading = false;
              })
            ;
          }
          else
          {
            console.log("error submit!!");
            return false;
          }
        })
        ;
      },
      reRand() {
        this.randStr = Math.random().toString()
      }
    },
    computed: {
      captcha: function () {
        return process.env.BASE_API + "service-user/login/captcha?rand=" + this.randStr
      }
    }
  };
</script>

<style type="text/scss" lang="scss" >
  @import "login-style.scss";
</style>
